<template>
  <div class="table-demo-wrapper">
    <div class="form-container">
      <div class="form-container--btns">
        <el-button type="success" size="mini" @click="handleAdd">+ 新增</el-button>
      </div>
      <div class="form-container--search">
        <el-input 
          size="small"
          placeholder="回车enter键入 进行查询"
          clearable
          v-model.trim="searchText"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </div>
    </div>
    <xinz-dialog 
      title="新增"
      :isDialog.sync="isShowAddDialog"
      @handleConfirm="handleConfirm(1)"
      @handleClose="handleClose"
    >
      <template v-slot:main>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" size="mini">          
          <el-form-item label="姓名" prop="user_name">
            <el-input v-model="form.user_name" autocomplete="off" maxlength="8" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="user_address">
            <el-input v-model="form.user_address" autocomplete="off" maxlength="12" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="user_remark">
            <el-input v-model="form.user_remark" autocomplete="off" maxlength="24" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </template>
    </xinz-dialog>
    <xinz-dialog 
      title="编辑"
      :isDialog.sync="isShowEditDialog"
      @handleConfirm="handleConfirm(2)"
      @handleClose="handleClose"
    >
      <template v-slot:main>
        <el-form ref="formRef" :model="form" label-width="50px" size="mini">   
          <el-form-item label="ID">
            <el-input v-model="form.id" disabled autocomplete="off" maxlength="8" show-word-limit></el-input>
          </el-form-item>       
          <el-form-item label="姓名">
            <el-input v-model="form.user_name" autocomplete="off" maxlength="8" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.user_address" autocomplete="off" maxlength="12" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.user_remark" autocomplete="off" maxlength="24" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </template>
    </xinz-dialog>
    <div class="table-container">
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          style="height: 100%;"
          :header-cell-style="{
            width: '100%',
            height: '48px',
            background: '#FAFAFA',
            fontSize: '14px',
            'white-space': 'nowrap',
          }"
        > 
          <el-table-column type="index" label="序号" min-width="50" align="center">
            <template v-slot:default="scope">
              <span>{{ (pageOption.current - 1) * pageOption.size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableOption"
            :key="index"
            :prop="item.propName"
            :label="item.labelName"
            :min-width="item.width"
          ></el-table-column>
          <el-table-column 
            label="操作"
            min-width="180"
          >
            <template slot-scope="scope">
              <el-button 
                type="primary" 
                size="small"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button 
                type="danger" 
                size="small"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <el-pagination layout="slot" >
          <span class="pagination-wrapper--left">
            共{{ pageOption.total }}条记录，第{{ pageOption.current }}/{{Math.ceil(pageOption.total / pageOption.size)}}页面
          </span>
        </el-pagination>
        <el-pagination
          class="pagination-wrapper--right"
          :current-page.sync="pageOption.current"
          :page-size.sync="pageOption.size"
          :total="pageOption.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          layout="prev, pager, next, jumper, sizes"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchTableData, addTableData, deleteTableData, editTableData } from '../api/index';
import xinzDialog from '@/components/xinz-dialog.vue';

export default {
  name: 'Home',
  components: {
    xinzDialog
  },
  mounted() {
    this.getTableData();
  },
  data() {
    return {
      searchText: '',

      tableData: [],
      tableOption: [
        {
          propName: "user_name",
          labelName: "姓名",
          width: "120"
        },
        {
          propName: "user_address",
          labelName: "地址",
          width: "180"
        },
        {
          propName: "user_remark",
          labelName: "备注",
          width: "180"
        }
      ],

      pageOption: {
        current: 1,
        size: 10,
        total: 0
      },

      isShowAddDialog: false,
      isShowEditDialog: false,

      form: {
        id: '',
        user_name: '',
        user_address: '',
        remark: ''
      },
      rules: {
        user_name: [
          { required: true, message: '用户名不能为空!', trigger: 'blur' }
        ],
        user_address: [
          { required: true, message: '地址不能为空!', trigger: 'blur' }
        ],
        user_remark: [
          { required: true, message: '备注不能为空!', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取table数据
    async getTableData() {
      this.tableData = [];

      const loading = this.$loading({
        // 开启数据加载效果
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,.5)",
      });

      let data = {
        pageIndex: this.pageOption.current,
        pageSize: this.pageOption.size,
        searchWord: this.searchText || null
      };
      const res = await fetchTableData(data);
      this.tableData = res.data || [];
      this.pageOption.total = res.total || 0;

      loading.close();
    },
    handleAdd() {
      this.isShowAddDialog = true;
    },
    handleEdit(row) {
      this.form.id = row.id;
      this.isShowEditDialog = true;
    },
    handleConfirm(type = 1) {
      if(type == 1) {
        this.$refs['formRef'].validate(async (valid) => {
          if(valid) {
            let data = {
              user_name: this.form.user_name,
              user_address: this.form.user_address,
              user_remark: this.form.user_remark,
              is_delete_status: 1
            };
            await addTableData(data);
            await this.getTableData();
            this.isShowAddDialog = false;
            this.$refs['formRef'].resetFields();
            this.$message({
              type: "success",
              message: "新增成功!"
            });
          } else {
            return false;
          }
        });
      } else if(type == 2) {
        console.log(222)
      }
    },
    handleClose() {
      this.$refs['formRef'].resetFields();
    },
    handleSearch() {
      if(this.searchText == "") {
        this.$message({
          type: "warning",
          message: "请输入内容以后再次搜索"
        }); 
      } else {
        this.getTableData();
      }
    },
    async handleDelete(row) {
      const data = {
        id: row.id
      };
      await deleteTableData(data);
      this.getTableData();
      this.$message({
        type: "error",
        message: "删除成功!"
      }); 
    },
    handleSizeChange(val) {
      this.pageOption.current;
      this.pageOption.size = val;
      // 查询列表数据
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageOption.current = val;
      // 查询列表数据
      this.getTableData();
    }
  }
}
</script>

<style>
.table-demo-wrapper {
  width: 100%;
  height: 100%;

  padding: 15px;
  box-sizing: border-box;
}

/* 查询表单 */
.form-container {
  height: 60px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.form-container .form-container--btns {
  margin-right: 10px;
}
.form-container .form-container--search {
  width: 240px;
  height: 28px;
}
.form-container--search .el-input--small {
  height: 28px !important;
  font-size: 12px;
}
.form-container .el-input__inner {
  height: 28px !important;
}

/* 表格 */
.table-container {
  width: 100%;
  height: calc(100% - 60px);

  box-sizing: border-box;
}
.table-container .table-wrapper {
  height: calc(100% - 40px);
}

/* 分页 */
.pagination-wrapper {
  height: 40px;

  display: flex;
  justify-content: space-between;

  margin-top: 10px;
}
.pagination-wrapper .pagination-wrapper--left {
  font-weight: 600;
  color: rgba(0,0,0,.65);
  font-size: 12px !important;
}
.pagination-wrapper .pagination-wrapper--right {
  color: #757575;
}

</style>